<template>
  <el-row>
    <el-col :span="1" />
    <el-col :span="2">
      <div>
        <el-radio-group v-model="Acount" size="large" style="margin-top: 60px">
          <el-radio-button
            label="用户管理"
            value="1"
            style="margin-top: 10px"
          />
          <el-radio-button
            label="场地管理"
            value="2"
            style="margin-top: 10px"
          />
          <el-radio-button
            label="订单管理"
            value="3"
            style="margin-top: 10px"
          />
          <el-radio-button
            label="设&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;置"
            value="4"
            style="margin-top: 10px"
          />
        </el-radio-group>
{{ Acount }}
      </div>
    </el-col>
    <el-col :span="20">
      <div style="margin-top: 40px" v-if="Acount == 1">
        <el-table :data="users" style="width: 100%">
          <el-table-column prop="userID" label="1" width="180" />
          <el-table-column prop="usernum" label="学号" width="180" />
          <el-table-column prop="userPhone" label="电话号码" />
          <el-table-column prop="username" label="姓名" />
          <el-table-column prop="useremail" label="邮箱" />
          <el-table-column align="right">
            <!--       <template #header>
        <el-input v-model="search" size="small" placeholder="Type to search" />
      </template> -->
            <template #default="scope">
              <el-button
                size="small"
                @click=""
              >
                Edit
              </el-button>
              <el-button
                size="small"
                type="danger"
                @click="deleteuser(scope.$index, scope.row)"
              >
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>

        <!-- <el-table :data="users" style="width: 100%">
          <el-table-column prop="userID" label="ID" width="180" ref="userID" :data="userID" ></el-table-column> 
          <el-table-column prop="usernum" label="学号" width="180" />
          <el-table-column prop="userPhone" label="电话号码" />
          <el-table-column prop="username" label="姓名" />
          <el-table-column prop="useremail" label="邮箱" />
          <el-table-column prop="" label="编辑" style="text-align:center" >
                  <template #header>
        <el-input v-model="search" size="small" placeholder="Type to search" />
      </template>
            <el-button @click="deleteuser(prop=$userID)">删除</el-button>
            <el-button @click="">修改</el-button>
          </el-table-column>

          
        </el-table> -->
      </div>

      <div style="margin-top: 40px" v-if="Acount == 3">
        <el-table :data="order" style="width: 100%">
          <el-table-column prop="reserve_id" label="订单ID" width="180" />
          <el-table-column prop="campusname" label="场地位置" width="180" />
          <el-table-column prop="yard_name" label="场地名称" />
          <el-table-column prop="reserve_date" label="租借日期" />
          <el-table-column prop="reserve_time" label="租借时间段" />
          <el-table-column align="right">

            <template #default="scope">
              <el-button
                size="small"
                @click=""
              >
                Edit
              </el-button>
              <el-button
                size="small"
                type="danger"
                @click="deleteorder(scope.$index, scope.row)"
              >
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>

        <!-- <el-table :data="users" style="width: 100%">
          <el-table-column prop="userID" label="ID" width="180" ref="userID" :data="userID" ></el-table-column> 
          <el-table-column prop="usernum" label="学号" width="180" />
          <el-table-column prop="userPhone" label="电话号码" />
          <el-table-column prop="username" label="姓名" />
          <el-table-column prop="useremail" label="邮箱" />
          <el-table-column prop="" label="编辑" style="text-align:center" >
                  <template #header>
        <el-input v-model="search" size="small" placeholder="Type to search" />
      </template>
            <el-button @click="deleteuser(prop=$userID)">删除</el-button>
            <el-button @click="">修改</el-button>
          </el-table-column>

          
        </el-table> -->
      </div>

      <div style="margin-top: 40px" v-if="Acount == 2">
        <el-table :data="yards" style="width: 100%">
          <el-table-column prop="yard_id" label="场地ID" width="180" />
          <el-table-column prop="campusname" label="场地位置" width="180" />
          <el-table-column prop="yard_name" label="场地名称" />
          <el-table-column prop="yard_type" label="场地类型" />
          <el-table-column prop="hourrate" label="场地租金" />
          <el-table-column align="right">

            <template #default="scope">
              <el-button
                size="small"
                @click=""
              >
                Edit
              </el-button>
              <el-button
                size="small"
                type="danger"
                @click="deleteyard(scope.$index, scope.row)"
              >
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>


    </el-col>
  </el-row>
</template>
<script lang="ts" setup>
import { useRouter } from "vue-router";
import { ArrowRight } from "@element-plus/icons-vue";
import { onMounted } from "vue";
import { computed, ref, toRaw } from "vue";
import { createApp } from "vue";
import ElementPlus from "element-plus";
import "element-plus/dist/index.css";

import "@/assets/iconfont/iconfont.css";
import skeleton from "@/components/skeleton.vue";
import axios from "axios";

const router = useRouter();
const isCollapse = ref(false);
const asideWidth = ref("200px");
const tCollapse = () => {
  isCollapse.value = !isCollapse.value;
  asideWidth.value = isCollapse.value ? "64px" : "200px";
  collapseIcon.value = isCollapse.value ? "Fold" : "Fold";
};
const handleOpen = (key, keyPath) => {
  console.log(key, keyPath);
};
const handleClose = (key, keyPath) => {
  console.log(key, keyPath);
};
const toggleFullScreen = () => {
  if (!document.fullscreenElement) {
    document.documentElement.requestFullscreen();
  } else {
    if (document.exitFullscreen) {
      document.exitFullscreen();
    }
  }
};

const isAdmin = ref(false);

onMounted(() => {
  const currentPath = window.location.pathname;
  if (currentPath.includes("../views/manager/admin")) {
    isAdmin.value = true;
  }
});

const getuser = async () => {
  const res = await axios.get(`http://localhost:8000/UserController/getUser`);
  getuser.value = res.data;
};

const getyard = async () => {
  const res = await axios.get(`http://localhost:8000/YardInfo/getYardList3`);
  yards.value = res.data;
};

const getorder = async () => {
  const res = await axios.get(`http://localhost:8000/YardInfo/getOrder`);
  order.value = res.data;
  console.log(order);
};

onMounted(() => {
  getyard();
});

onMounted(() => {
  getorder();
});

const users = ref();
const yards = ref();
const order =ref();
const fetchUsers = async () => {
  try {
    const response = await axios.get("http://localhost:8000/adminuser");
    console.log(response);
    users.value = response.data;
  } catch (error) {
    console.error("Error fetching users:", error);
    alert("无法获取用户数据，请稍后再试。");
  }
};

onMounted(() => {
  fetchUsers();
});



const app = {
  data() {
    return {
      tablestatu: 0,
    };
  },
};

const Acount = ref(0);

const search = ref("");

const filterTableData = computed(() =>
  tableData.filter(
    (data) =>
      !search.value ||
      data.name.toLowerCase().includes(search.value.toLowerCase())
  )
);
const handleEdit = (index: number, row: User) => {
  console.log(index, row);
};
const handleDelete = (index: number, row: User) => {
  console.log(index, row);
};

const deleteuser = async (index: number, row: User) => {
  row = toRaw(row);
  console.log(row);
  row = row.userID;
  console.log(row);
  const res = await axios.post(
    `http://localhost:8000/UserController/deleteUser`,
    {
      userID: row,
    }
  );
  getuser
};

const deleteyard = async (index: number, row: User) => {
  row = toRaw(row);
  console.log(row);
  row = row.yard_id;
  console.log(row);
  const res = await axios.post(
    `http://localhost:8000/adminYard/deleteYard`,
    {
      yard_id: row,
    }
  );
  getyard();
};

const deleteorder = async (index: number, row: User) => {
  row = toRaw(row);
  console.log(row);
  row = row.reserve_id;
  console.log(row);
  const res = await axios.post(
    `http://localhost:8000/adminYard/deleteorder`,
    {
      reserve_id: row,
    }
  );
  getorder();
};
</script>
<style scoped></style>
